<template>
  <el-dialog v-model="visible"
             :close-on-click-modal="false" draggable height="80%" width="80%">
    <el-form :model="state.queryForm" ref="queryRef" :inline="true" >
      <el-row>
        <el-form-item :label="$t('wms.materialCode')" prop="materialCode">
          <el-input
              :placeholder="$t('form.pleaseInput', [$t('wms.materialCode')])"
              clearable
              v-model="state.queryForm.materialCode"
              style="width: 200px"
          />
        </el-form-item>
        <el-form-item :label="$t('iot.materialName')" prop="materialName">
          <el-input
              :placeholder="$t('form.pleaseInput', [$t('iot.materialName')])"
              clearable
              v-model="state.queryForm.materialName"
              style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="search" type="primary" @click="getDataList">
            {{ $t('btn.search') }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetQuery" icon="Refresh">{{ $t('btn.reset') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="exportExcel" icon="Refresh">{{ $t('report.export') }}</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-table :data="state.dataList" v-loading="state.loading" border :fit="true"
              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle" >
      <el-table-column prop="totalMesQty" label="mes库存" show-overflow-tooltip/>
      <el-table-column prop="k3Qty" label="k3库存" show-overflow-tooltip/>
      <el-table-column prop="diff" label="差异" show-overflow-tooltip>
        <template #default="scope">
          <el-tag type="danger" v-if="scope.row.totalMesQty - scope.row.k3Qty != 0">{{ (scope.row.totalMesQty - scope.row.k3Qty)?.toFixed(5) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="materialCode" label="物料代码" show-overflow-tooltip/>
      <el-table-column prop="materialNameCh" label="物料名称" show-overflow-tooltip/>
      <el-table-column prop="materialName" label="物料名称" show-overflow-tooltip/>
      <el-table-column prop="materialSpec" label="物料规格" show-overflow-tooltip/>
      <el-table-column prop="unit" label="单位" show-overflow-tooltip/>
    </el-table>
    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
    <template #footer>
            <span class="dialog-footer">
              <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
            </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {getContrastK3PageSet} from "/@/api/platform/mes/wmsCheckstock";
import {ref} from "vue";
import {downBlobFile} from "/@/utils/other";

const visible = ref(false); // 弹框是否显示
const queryRef = ref();
const isStockOptions = ref([
  {name: "已盘", value: "1"},
  {name: "未盘", value: "2"},
]);
// 父级点击的行
const parentClickRow = {}
// 打开弹框
const openDialog = (row: any) => {
  console.log(row);
  visible.value = true;
  state.queryForm.billCode = row.billCode
  state.queryForm.wareHouseCode = row.warehouseCode
  // 保存选中的行数据
  Object.assign(parentClickRow, row)
  // 刷新子表数据
  getDataList()
};


// 搜索变量
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: getContrastK3PageSet
})


const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  tableStyle
} = useTable(state)


const exportExcel = () =>{

  downBlobFile('/eletile-mes/wmsCheckstockH/exportContrastK3', state.queryForm, 'K3对比' + new Date().getTime() + '.xlsx');
}


// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  getDataList()
}


// 暴露变量
defineExpose({
  openDialog,
});
</script>

<style scoped lang="scss"></style>

<style scoped>
</style>